<template>
  <div>
    <div style="z-index:3;margin-bottom:10px;">
        <el-breadcrumb separator-class="el-icon-arrow-right title">
            <el-breadcrumb-item :to="{ path: '/HomeAdmin' }" style="font-size:20px;">首页</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size:20px;">我的店铺</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size:20px;">已上架的盲盒</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div>
      <el-input v-model="keyword" placeholder="请输入搜索的盲盒名" style="width: 20%; margin-bottom:5px; margin-right:5px;"
      clearable></el-input>
      <el-button type="primary" plain @click="getBlindBoxInfoList(1,10,keyword)">查询</el-button>
      <el-button type="primary" plain @click="dialogAddblindBox = true">新增盲盒</el-button>
      <el-table
        :data="blindBoxInfoList"
        style="width: 100%"
        height="700"
        >
        <el-table-column
          label="盲盒图片"
        >
        <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
                <el-image :src="scope.row.blindBoxImage != null ? require('D:/毕设/前端/blind_box/src/assets/'+scope.row.blindBoxImage):''" alt="暂无图片" style="width: 200px;height: 200px"></el-image>
                <el-image slot="reference" :src="scope.row.blindBoxImage != null ? require('D:/毕设/前端/blind_box/src/assets/'+scope.row.blindBoxImage):''" style="width: 100px;height: 100px"></el-image>
            </el-popover>
        </template>
        </el-table-column>
        <el-table-column
          prop="blindBoxName"
          label="盲盒名"
        >
        </el-table-column>
        <el-table-column
          prop="blindBoxInfo"
          label="盲盒信息"
        >
        </el-table-column>
        <el-table-column
          prop="money"
          label="盲盒价格"
        >
        <template slot-scope="scope">
            <span>{{scope.row.money}}￥</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
        <template slot-scope="userInfoList">
          <el-button @click="deleteBlindBoxInfo(userInfoList.row.blindBoxId)" type="text" size="small">下架</el-button>
        </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 用户详细信息 -->
    <!-- <div>
      <el-dialog title="我的信息" :visible.sync="dialogUserInfo">
        <el-form :model="userInfo" :rules="userInfoRules">
          <el-form-item label="用户名" prop="username" style="font-weight: bolder;">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" style="font-weight: bolder;"> 
            <el-input v-model="userInfo.password" disabled></el-input>
          </el-form-item>
          <el-form-item label="性别" style="font-weight: bolder;">
            <el-radio-group v-model="userInfo.gender" disabled>
              <el-radio label="男" style="font-weight: bolder;"></el-radio>
              <el-radio label="女" style="font-weight: bolder;"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号码" prop="phoneNumber" style="font-weight: bolder;">
            <el-input v-model="userInfo.phoneNumber" disabled></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="reload()">取消</el-button>
        </div>
      </el-dialog>
    </div> -->
    <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    </div>
    <!-- 新增盲盒 -->
    <el-dialog title="新增盲盒" :visible.sync="dialogAddblindBox">
      <el-form ref="blindBoxInfo" :model="blindBoxInfo" :rules="blindBoxInfoRules">
        <el-form-item label="盲盒名称" prop="blindBoxName" style="font-weight: bolder;"> 
          <el-input type="text" v-model="blindBoxInfo.blindBoxName" placeholder="请输入盲盒名"></el-input>
        </el-form-item>
        <el-form-item label="盲盒信息" prop="blindBoxInfo" style="font-weight: bolder;"> 
          <el-input type="text" v-model="blindBoxInfo.blindBoxInfo" placeholder="请输入盲盒信息"></el-input>
        </el-form-item>
        <el-form-item label="盲盒售价" prop="money" style="font-weight: bolder;"> 
          <el-input type="text" v-model="blindBoxInfo.money" placeholder="请输入盲盒售价"></el-input>
        </el-form-item>
        <el-form-item label="盲盒成本" prop="averageCost" style="font-weight: bolder;"> 
          <el-input type="text" v-model="blindBoxInfo.averageCost" placeholder="请输入盲盒成本"></el-input>
        </el-form-item>
        <el-button @click="dialogLoadPicture = true">上传图片</el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('blindBoxInfo')">重置</el-button>
        <el-button type="primary" @click="addBlindBox('blindBoxInfo')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="上传图片" :visible.sync="dialogLoadPicture">
      <el-upload
        class="upload-demo"
        action="http://localhost:9001/merchant/addBlindBoxImage"
        :file-list="fileList"
        list-type="picture"
        :multiple=false
        :limit=1
        name="image"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
      </el-upload>
      <el-button type="primary" @click="dialogLoadPicture = false">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data(){
    return{
      keyword: '',
      currentPage: 1,
      dialogLoadPicture: false,
      dialogAddblindBox: false,
      blindBoxInfoListShow: false,
      blindBoxInfoList: [{
        blindBoxId: null,
        blindBoxName: null,
        blindBoxInfo: null,
        blindBoxImage: null,
        money: null,
        createTime: null
      }],
      pageInfo: {
        endRow: null,
        hasNextPage: false,
        hasPreviousPage: false,
        isFirstPage: true,
        isLastPage: true,
        list: [],
        navigateFirstPage: null,
        navigateLastPage: null,
        navigatePages: null,
        navigatepageNums: [],
        nextPage: null,
        pageNum: null,
        pageSize: null,
        pages: null,
        prePage: null,
        size: null,
        startRow: null,
        total: null,
      },
      blindBoxInfo:{
          blindBoxTypeId: null,
          blindBoxName: null,
          blindBoxInfo: null,
          money: null,
          averageCost: null
      },
      blindBoxInfoRules:{
          blindBoxName:[
            {required: true, message: '请输入盲盒名', trigger: 'blur'}
          ],
          money:[
            {required: true, message: '请输入盲盒售价', trigger: 'blur'}
          ],
          averageCost:[
            {required: true, message: '请输入盲盒成本', trigger: 'blur'}
          ]
      },
      fileList:[],
      fileInfo:{
        name:'',
        url:''
      }
    }
  },
  methods: {
    getBlindBoxInfoList(pageNum,pageSize,keyword){
      const token = localStorage.getItem("loginToken")
      this.$axios({url:'/merchant/queryMerchantBlindBox', methods: 'GET',params:{pageNum:pageNum,pageSize:pageSize,keyword:keyword},headers:{"token":token}})
      .then(res => {
        if(res.data.data != null){
          this.pageInfo = res.data.data
          this.blindBoxInfoList = res.data.data.list
          this.blindBoxInfoListShow = true
        }else{
          this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
          })
        }
      })
      .catch(err => {
      })
    },
    handleCurrentChange(pageNum){
      console.log('当前页：'+pageNum)
      this.getBlindBoxInfoList(pageNum,10,this.keyword)
    },
    handleSizeChange(pageSize){
      console.log('每页'+pageSize+'条')
      this.getBlindBoxInfoList(1,pageSize,this.keyword)
    },
    deleteBlindBoxInfo(blindBoxId){
        var that = this
      const token = localStorage.getItem("loginToken")
      this.$axios({url:'/merchant/deleteBlindBox', methods: 'GET',params:{blindBoxId:blindBoxId},headers:{"token":token}})
      .then(res => {
        console.log(res.data.msg)
        if(res.data.code == 200){
            that.$message({
                showClose: true,
                message: res.data.msg,
                type: "success"
            })
        }
      })
      .catch(err => {
      })
      this.reload()
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    },
    beforeUpload(file){
      var isPacture2M = file.size / 1024 / 1024 < 2
      if(!isPacture2M){
        this.$message({
          message: "上传文件大小不能超过 2MB!",
          type: "warning"
        })
      }
    },
    addBlindBox(formName){
      var that = this;
      this.$refs[formName].validate((valid)=>{
        if(valid){
          var token = localStorage.getItem("loginToken")
          this.$axios.post('/merchant/addBlindBox',this.blindBoxInfo,{headers:{"token": token}})
          .then(res=>{
            if(res.data.code == 200){
              that.$message({
                showClose: true,
                message: "增加盲盒成功",
                type: "success"
              })
              that.dialogUserInfo = false
              that.reload()
            }else{
              that.$message({
                showClose: true,
                message: res.data.msg,
                type: "error"
              })
              that.dialogUserInfo = false
              that.reload()
            }
          })
        }else{
          this.$message({
            showClose: true,
            message: "请检查输入的信息是否符合规范",
            type: "warning"
          })
        }
      })
    }
  }
}
</script>

<style>

</style>
